/* eslint-disable vue/max-attributes-per-line */
<template>
	<el-container class="home-container">
		<!-- 头部 -->
		<el-header>
			<div>
				<img alt="logo" src="../assets/heima.png" />
				<span>电商管理平台</span>
			</div>
			<el-button type="danger" @click="logout"> 退出登录 </el-button>
		</el-header>
		<el-container>
			<!-- 侧边栏 -->
			<el-aside :width="iscollapse ? '60px' : '200px'">
				<div @click="menu_collapse">|||</div>
				<!-- 侧边栏菜单区域 -->
				<el-menu
					:collapse="iscollapse"
					:collapse-transition="false"
					:default-active="activePath"
					active-text-color="#689cf4"
					background-color="#333742"
					router
					text-color="#fff"
					unique-opened
				>
					<!-- 一级菜单 -->
					<el-submenu v-for="item in menulist" :key="item.id" :index="'/' + item.path">
						<template slot="title">
							<!-- 图标 -->
							<i :class="iconobj[item.id]" />
							<!-- 文本 -->
							<span>{{ item.authName }}</span>
						</template>
						<!-- 二级菜单 -->
						<el-menu-item v-for="subitem in item.children" :key="subitem.id" :index="'/' + subitem.path" @click="saveNavStatus('/' + subitem.path)">
							<!-- 图标 -->
							<i class="el-icon-menu" />
							<!-- 文本 -->
							<span>{{ subitem.authName }}</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<!-- 主体内容 -->
			<el-main>
				<!-- 路由占位符 -->
				<router-view />
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			menulist: [],
			iconobj: {
				125: 'iconfont icon-user',
				103: 'iconfont icon-tijikongjian',
				101: 'iconfont icon-shangpin',
				102: 'iconfont icon-danju',
				145: 'iconfont icon-baobiao',
			},
			iscollapse: false,
			activePath: '',
		}
	},
	// 页面渲染前被调用
	created() {
		this.getMenuList()
		// 页面重新渲染的时候，会把存起来的状态重新渲染
		this.activePath = window.sessionStorage.getItem('activeStatus')
	},
	methods: {
		// TODO 退出登录
		logout() {
			window.sessionStorage.clear()
			this.$router.push('/login')
		},
		// TODO ajax获取左侧菜单
		async getMenuList() {
			const { data: res } = await this.$http.get('menus')
			if (res.meta.status !== 200) return this.$message.error('获取失败')
			// this.$message.success('获取成功')
			this.menulist = res.data
		},
		menu_collapse() {
			this.iscollapse = !this.iscollapse
		},
		// 点击的时候，侧边栏状态，动态切换及保持
		saveNavStatus(active) {
			// 把选中的栏目存入sessionStorage，保持状态
			window.sessionStorage.setItem('activeStatus', active)
			// 动态切换
			this.activePath = active
		},
	},
}
</script>

<style lang="less" scoped>
.el-header {
	background-color: #383d3f;
	display: flex;
	justify-content: space-between;
	padding-left: 0;
	align-items: center;
	color: #fff;
	font-size: 20px;

	> div {
		display: flex;
		align-items: center;

		> span {
			margin-left: 15px;
		}
	}
}

.el-aside {
	background-color: #333742;

	> div {
		background-color: #333742;
		line-height: 24px;
		font-size: 10px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
	}
}

.el-main {
	background-color: #eaedf0;
}

.home-container {
	height: 100%;
}

.el-menu {
	border-right: 0;
}

.iconfont {
	margin-right: 10px;
}
</style>
